<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>会员管理</title>
    <style>
        table { width: 100%; border-collapse: collapse; margin-top: 30px; }
        th, td { border: 1px solid #eee; padding: 12px; text-align: center; }
        th { background: #f5f5f5; }
        .set-level-btn { background: #5a3ec8; color: #fff; border: none; border-radius: 10px; padding: 6px 18px; cursor: pointer; }
        .set-level-btn:hover { background: #764ba2; }
    </style>
</head>
<body class="main-bg">
  <div class="main-card">
    <h2 class="main-title">会员管理</h2>
    <a href="adminindex.html" class="back-home-btn">返回首页</a>
    <table id="memberTable" class="main-table">
      <thead>
        <tr>
          <th>用户ID</th>
          <th>用户名</th>
          <th>真实姓名</th>
          <th>手机号</th>
          <th>当前等级</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script>
        function loadMembers() {
            $.ajax({
                url: 'http://localhost:8080/api/user/members',
                type: 'GET',
                xhrFields: { withCredentials: true },
                success: function(data) {
                    let html = '';
                    data.forEach(function(u) {
                        html += `<tr>
                            <td>${u.userId}</td>
                            <td>${u.username}</td>
                            <td>${u.realName || ''}</td>
                            <td>${u.phone || ''}</td>
                            <td>${u.level}</td>
                            <td>
                                <select class="level-select" id="level_${u.userId}" data-origin="${u.level}">
                                    ${[1,2,3,4,5,6,7,8].map(l => `<option value="${l}" ${l==u.level?'selected':''}>${l}</option>`).join('')}
                                </select>
                                <button class="set-level-btn" id="setBtn_${u.userId}" onclick="setLevel(${u.userId})" disabled>设置</button>
                            </td>
                        </tr>`;
                    });
                    $('#memberTable tbody').html(html);
                    // 下拉框监听
                    $('.level-select').on('change', function() {
                        var origin = $(this).data('origin').toString();
                        var val = $(this).val();
                        var userId = $(this).attr('id').split('_')[1];
                        var btn = $('#setBtn_' + userId);
                        if(val !== origin) {
                            btn.prop('disabled', false);
                        } else {
                            btn.prop('disabled', true);
                        }
                    });
                }
            });
        }
        function setLevel(userId) {
            let level = $(`#level_${userId}`).val();
            $.ajax({
                url: 'http://localhost:8080/api/user/setLevel',
                type: 'POST',
                data: {userId, level},
                xhrFields: { withCredentials: true },
                success: function(res) {
                    if(res === 'success') {
                        alert('设置成功');
                        loadMembers();
                    } else {
                        alert('设置失败：' + res);
                    }
                }
            });
        }
        loadMembers();
    </script>
  <style>
    .main-bg {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 0;
      margin: 0;
    }
    .main-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(90,62,200,0.12);
      max-width: 1100px;
      margin: 60px auto 0 auto;
      padding: 40px 32px 32px 32px;
    }
    .main-title {
      font-size: 32px;
      font-weight: 800;
      color: #5a3ec8;
      margin-bottom: 18px;
      letter-spacing: 1px;
    }
    .main-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 2px 12px #e0d7f7;
      margin-top: 30px;
      background: #fafaff;
    }
    .main-table th, .main-table td {
      padding: 14px 10px;
      text-align: center;
    }
    .main-table th {
      background: #f5f5f5;
      color: #5a3ec8;
      font-weight: 700;
    }
    .main-table tr:nth-child(even) {
      background: #f7f3ff;
    }
    .main-table tr:hover {
      background: #e0e7ff;
    }
    .set-level-btn {
      background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 6px 20px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 8px #e0d7f7;
    }
    .set-level-btn:hover {
      background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
      color: #5a3ec8;
    }
    .back-home-btn {
      display: inline-block;
      margin: 18px 0 0 0;
      background: #f5f5f5;
      color: #5a3ec8;
      border: none;
      border-radius: 18px;
      padding: 8px 28px;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      box-shadow: 0 2px 8px #e0d7f7;
    }
    .back-home-btn:hover {
      background: #e0e7ff;
      color: #333;
    }
    @media (max-width: 700px) {
      .main-card { padding: 18px 4vw; }
      .main-title { font-size: 22px; }
      .main-table th, .main-table td { padding: 8px 2px; }
    }
    .level-select {
      padding: 6px 18px;
      border-radius: 10px;
      border: 1.5px solid #b3a6e6;
      background: linear-gradient(90deg, #f5f5ff 0%, #e0e7ff 100%);
      color: #5a3ec8;
      font-size: 15px;
      font-weight: 600;
      outline: none;
      box-shadow: 0 1.5px 6px #e0d7f7;
      transition: border 0.2s, box-shadow 0.2s;
      margin-right: 8px;
      cursor: pointer;
    }
    .level-select:focus {
      border: 1.5px solid #764ba2;
      box-shadow: 0 2px 8px #a18cd1;
    }
    .set-level-btn:disabled {
      background: #e0e7ff;
      color: #aaa;
      cursor: not-allowed;
      box-shadow: none;
    }
  </style>
</body>
</html> 